<template>
  <div class='pay-order-container'>
    <div class="head">
      <h2>支付</h2>
      <div class="step-container">
        <el-steps :active="1"
                  finish-status="success"
                  align-center>
          <el-step title="确认订单">
          </el-step>
          <el-step title="支付">
          </el-step>
          <el-step title="支付成功">
          </el-step>
        </el-steps>
      </div>
    </div>
    <div class="choose-pay-way">
      <p>选择支付方式</p>
      <div class="pay-way">
        <button :class="{'choosen':payType==='online'}"
                @click="togglePayType('online')">在线支付</button>
        <!-- <button :class="{'choosen':payType==='offline'}"
                @click="togglePayType('offline')">线下支付</button> -->
      </div>
    </div>
    <div class="payway-container">
      <p>应付金额：<span>￥{{orderInfo.total_price}}</span></p>
      <ul v-if="payType==='online'"
          class="pay-way-list">
        <li class="pay-way-item">
          <el-radio :checked="true"
                    class="pay-way-checkbox"></el-radio>
          <div class="pay-way-detail choosen">
            <img src="@/assets/ali.png"
                 alt="">
            <p>使用支付宝支付</p>
          </div>
        </li>
        <li class="pay-way-item">
          <el-radio :disabled="true"
                    class="pay-way-checkbox"></el-radio>
          <div class="pay-way-detail">
            <img src="@/assets/wechat.png"
                 alt="">
            <p>使用微信支付</p>
          </div>
        </li>
      </ul>
      <div v-if="payType==='offline'"
           class="offline-pay-container">
        <span>温馨提示：受银行处理时间影响，采用线下汇款方式到账会有延迟，强烈建议采用在线支付方式。</span>
        <p>转账银行：浙江工商银行西湖区支行</p>
        <p>转账账户：</p>
      </div>
    </div>
    <div class="confirm-submit">
      <button @click="confirmSubmit"
              v-if="payType==='online'"
              class="confirm-submit-button">确认支付</button>
      <button @click="backOrderList"
              v-if="payType==='offline'"
              class="confirm-submit-button">返回订单列表</button>
    </div>
    <el-dialog :visible.sync="payResultDialogVisible"
               width="30%"
               :modal="false"
               title="支付结果提示">
      <span>支付请求已提交，请稍后查看支付结果。</span>
      <span slot="footer"
            class="dialog-footer">
        <!-- <el-button>支付遇到问题</el-button> -->
        <el-button type="primary"
                   :disabled="orderResult.order_status!=='3'"
                   @click="paySuccess">支付完成</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { orderListApi } from "@/services/PersonalCenter";
import { setInterval, clearInterval } from 'timers';
export default {
  data () {
    return {
      orderInfo: {},
      uuid: 1,
      pending: false,
      intervalId: 0,
      orderResult: {},
      // 询问支付结果弹框
      payResultDialogVisible: false,
      // 支付方式
      payType: 'online'
    }
  },
  methods: {
    confirmSubmit () {
      orderListApi.confirmSubmit({
        data: {
          order_no: this.orderInfo.order_no,
          pay_type: 'ali_pay',
          pay_way: 'web'
        }
      }).then((res) => {
        if (res) {
          const div = document.createElement('div');
          div.innerHTML = (res.data);  //res.data是返回的表单
          document.body.appendChild(div);
          document.forms[0].target = '_blank'
          document.forms[0].submit();
          console.time('order_status')
          this.isPaySuccess()
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    // 显示是否支付成功弹框
    isPaySuccess () {
      let interval = setInterval(() => {
        if (!this.pending) {
          this.getOrderDetail()
        }
      }, 1000)
      this.intervalId = interval
      this.payResultDialogVisible = true
      // this.$confirm('支付完成后，请根据您支付的情况点击下面按钮', '支付提示', {
      //   confirmButtonText: '支付完成',
      //   cancelButtonText: '支付遇到问题'
      // }).then(() => {
      //   this.getOrderDetail()
      // }).catch(() => {

      // })
    },
    // 获取订单详情，判断是否支付成功
    getOrderDetail () {
      this.pending = true;
      orderListApi.isSuccessOrFail({
        params: {
          uuid: this.uuid,
          order_id: this.orderInfo.order_id
        }
      }).then((res) => {
        this.pending = false
        let data = res.data;

        if (data) {
          this.orderResult = data
          if (data.order_status === '3') {
            this.orderResult = data
            console.timeEnd('order_status')
            clearInterval(this.intervalId)
          }
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    // 支付成功
    paySuccess () {
      this.payResultDialogVisible = false
      this.$router.push({
        path: '/paySuccess',
        query: {
          orderResult: JSON.stringify(this.orderResult),
          uuid: this.uuid
        }
      })
    },
    // 切换支付方式
    togglePayType (type) {
      this.payType = type
    },
    // 返回订单列表
    backOrderList () {

    }
  },
  created () {
    this.orderInfo = JSON.parse(this.$route.query.orderInfo)
    this.uuid = this.$route.query.uuid
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
/deep/ .el-step__head {
  &.is-process,
  &.is-success {
    .el-step__icon {
      width: 32px;
      height: 32px;
      color: #1890ff;
      border-color: #1890ff;
      font-size: 16px;
      font-weight: bold;
    }
  }
  &.is-wait {
    .el-step__icon {
      width: 32px;
      height: 32px;
      color: #bfbfbf;
      border-color: #bfbfbf;
      font-size: 16px;
      font-weight: bold;
    }
  }
  .el-step__line {
    top: 15px;
    background-color: #bfbfbf;
  }
}
/deep/ .el-step__main {
  .el-step__title {
    font-size: 14px;
    color: #666;
    font-weight: normal;
  }
}
@function p2vw($size) {
  @return ($size/1366) * 100vw;
}
.pay-order-container {
  /deep/ .el-dialog {
    box-shadow: 0 4px 4px rgba($color: #000000, $alpha: 0.2);
    -webkit-box-shadow: 0 4px 4px rgba($color: #000000, $alpha: 0.2);
  }
  .head {
    h2 {
      height: 50px;
      padding-left: 20px;
      border-bottom: 1px solid #d9d9d9;
      font-size: 16px;
      color: #1441b3;
      line-height: 50px;
      margin: 0;
      font-weight: normal;
    }
    .step-container {
      width: 700px;
      margin: 40px auto 0;
    }
  }
  .choose-pay-way {
    margin-top: 40px;
    padding: 0 20px 20px;
    border-bottom: 1px solid #e6e6e6;
    p {
      font-size: 14px;
      color: #333;
      font-weight: bold;
    }
    button {
      width: 96px;
      height: 36px;
      border-radius: 4px;
      border: 1px solid #bfbfbf;
      font-size: 14px;
      color: #666;
      line-height: 32px;
      margin-right: 20px;
      background: #fff;
      cursor: pointer;
      &.choosen {
        border: 1px solid #1890ff;
        color: #1890ff;
      }
      &:focus {
        outline: 0;
      }
    }
  }
  .payway-container {
    margin-top: 40px;
    padding: 0 20px;

    > p {
      font-size: 14px;
      color: #999;
      span {
        color: #ff4d4f;
        font-size: 18px;
        font-weight: bold;
      }
    }
    .pay-way-list {
      display: flex;
      justify-content: flex-start;
      border-bottom: 1px solid #e6e6e6;
      padding-bottom: 20px;
      .pay-way-item {
        margin-right: 80px;
        width: 230px;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .pay-way-checkbox {
          margin-right: 20px;
        }
        .pay-way-detail {
          padding: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid #bfbfbf;
          border-radius: 4px;
          width: 200px;
          height: 80px;
          box-sizing: border-box;
          &.choosen {
            border: 1px solid #1890ff;
          }
          img {
            width: 40px;
            height: 40px;
            margin-right: 12px;
          }
          p {
            font-size: 14px;
            color: #333;
            width: 98px;
          }
        }
      }
    }
    .offline-pay-container {
      margin-top: 20px;

      border-bottom: 1px solid #e6e6e6;
      span {
        font-size: 12px;
        color: #ff4d4f;
        margin-bottom: 20px;
      }
      p {
        font-size: 16px;
        color: #333;
        &:not(:last-child) {
          margin-bottom: 12px;
        }
      }
    }
  }
  .confirm-submit {
    margin-top: 40px;
    padding: 0 20px;
    .confirm-submit-button {
      width: 96px;
      height: 36px;
      background: #1890ff;
      color: #fff;
      border: 0;
      line-height: 36px;
      font-size: 14px;
      border-radius: 4px;
    }
  }
}
</style>